<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：兑换列表组件 
 *		作   者：Frank
 *		创建日期：2023/08/23
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/08/23			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="component">
		<view class="top">兑换ID: {{data.id}}</view>
		<view class="box">
			<view class="left">
				<image class="left-img" :src="data.main_img" mode=""></image>
			</view>
			<view class="mid">
				<view class="mid-name">{{data.name}}</view>
			</view>
			<view class="right">
				<template v-if="data.state == 0">
					<view class="right-text">审核中</view>
					<!-- <view v-if="data.comment_id == 0" class="right-btn" @tap="onComment">评价</view> -->
				</template>
 				<template v-else-if="data.state == 1">
					<view class="right-text">待发货</view>
				</template>
				<template v-else-if="data.state == 2">
					<view class="right-text">已发货</view>
				</template>
				<template v-else>
					<view class="right-text">已完成</view>
					<view v-if="data.comment_id == 0" class="right-btn" @tap="onComment">评价</view>
					<view v-else>已评价</view>
				</template> 
			</view>			
		</view>
		<view class="bottom" v-if="data.state == 2">{{data.express_name}}:{{data.express_id}}</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import utility from '@/common/utility.js'
	import { configStore } from '@/store/modules/configStore.js'
	import { mapStores, mapActions, mapState } from 'pinia'
	import { exchangeStore } from '@/store/modules/exchangeStore.js'
	import { commodityStore } from '@/store/modules/commodityStore.js'
	export default {
		props:{
			data:Object
		},
		data() {
			return {
			}
		},		
		computed:{
			...mapStores(commodityStore, configStore, exchangeStore)
		},
		methods: {
			 onComment(){
				 let commodity = this.commodityStore.commodity[this.data.cate_id][this.data.commodity_index];
				 let url = '/pages/add-comment/add-comment?exchangeId=' + this.data.id;
				 url += '&';
				 url += 'comName=' + commodity.simple_name;
				 uni.navigateTo({
				 	url
				 });
			 }
		}
	}
</script>

<style scoped>
	.component{
		background-color: white;
		margin: 16rpx 0;
		font-size: 24rpx;
		color:#ABABAB;
		border-radius: 25rpx;
	}
	.top{
		padding-left: 16rpx;
		font-size: 24rpx;
		line-height: 44rpx;
	}
	.right-text{
		font-size: 24rpx;
		font-weight: bold;
		line-height: 44rpx;		
	}
	.right-btn{
		width: 120rpx;
		height: 50rpx;
		color: black;
		border: 2rpx solid lightgrey;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bottom{
		padding-left: 16rpx;
		font-size: 24rpx;
	}
	.box{
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 44rpx;
		padding: 16rpx;		
	}

	.font-bold{
		font-size: 28rpx;
		font-weight: bold;
		color:#3518A1
	}
	.left{
		flex:1;
	}
	.left-img{
		width: 100rpx;
		height: 100rpx;
	}
	.mid{
		flex:3;
		display: flex;
		flex-direction: column;
	}
	.mid-name{
		color:black;
		font-size: 26rpx;
		font-weight: bold;
	}
	.right{
		flex:1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>